<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>箭头函数</title>
  <style>
    #one{
      width: 100px;
      height: 100px;
      background: red;
    }
    #one.bg{
      background: yellow;
    }
  </style>
</head>
<body>
<div id="one"></div>
<script>
  /**
   * 关于箭头函数中的this的指向
   普通函数的this：指向它的调用者，如果没有调用者则默认指向window.
   箭头函数的this: 指向箭头函数定义时所处的对象，而不是箭头函数使用时所在的对象，默认使用父级的this.

   综上：箭头函数没有自己的this，它的this是继承而来，默认指向在定义它时所处的对象(宿主对象)。

   */
  const one = document.getElementById('one');
  //普通函数的this：指向它的调用者，如果没有调用者则默认指向window.
  //this指向window对象
  // one.onclick = function (){
  //   var obj = this
  //   setTimeout(function (){
  //     console.log(this);
  //     obj.className = 'bg'
  //   },1000)
  // }
  //箭头函数的this: 指向箭头函数定义时所处的对象，而不是箭头函数使用时所在的对象，默认使用父级的this.
  //this指向 <div id="one" class="bg"></div>
  one.onclick = function (){
    setTimeout(()=>{
      console.log(this);
      this.className = 'bg'
    },1000)
  }

</script>
<script>
  /**
   * ES6 允许使用“箭头”（=>）定义
   function 换成 => 放在参数和函数体中间
   1. 如果没有参数， 或有多个参数就需要使用 ()来定义参数列表
   2. 如果有一个参数，可以不用()
   3. 如果函数体中只有一条语句， 可以不用{}， 就不用使用return 会自动加上
   */
  const fun1 = function (x){
    return x+x;
  }
  //标准箭头函数
  const fun2 = (x) => {
    return x*x;
  }
  //没有参数的时候
  const fun3 = () =>{ return 5;}
  //有一个参数的时候
  const fun4 = x => {return x*x;}
  //函数体只有一个语句的时候
  const fun5 = (x,y) => x+y;
  //只有一个参数和函数体只有一个语句的时候
  const fun6 = x => x+x;
  console.log('fun1的结果' + fun1(1));
  console.log('fun2的结果' + fun2(2));
  console.log('fun3的结果' + fun3());
  console.log('fun4的结果' + fun4(4));
  console.log('fun5的结果' + fun5(5,6));
  console.log('fun6的结果' + fun6(6));

</script>

</body>
</html>